<template>
    <div style="background: #ececea;">
 <el-container class="container">
  <el-container class="mv-container">
    <el-header class="video">
        <!-- 视频 -->
        <div id="mvvideo"></div>
        <div class="mvinfo">
                <div class="name">{{this.mvinfo.name}}</div>
                    <div class="otherinfo">
                        <div class="playcount">播放量：{{this.mvinfo.playCount}}</div>
                        <div class="artist">/{{this.mvinfo.artistName}}</div>
                        <div class="datetime">发布时间：{{this.mvinfo.publishTime}}</div>
                    </div>
            </div>
    </el-header>
    <el-main class="comments-container">
        <!-- 用户评论 -->
            <div class="comments">
                <!-- 热门评论 -->
                <div class="comments-txt" >用户评论</div>
                <div class="hot-comments">
                    <div class="comments-title" >热门评论({{hotcommentscount}})</div>
                    <div class="comments-body" v-for="item in hotcommentslist" :key="item.commentId">
                        <el-image @click="linkToSubscribers(item.user.userId)"  class="comments-avatarimg" :src="item.user.avatarUrl" ></el-image>
                        <div class="comments-nickname">{{item.user.nickname}}</div>
                        <div class="comments-time">{{item.time | dateFormat('YYYY-MM-DD hh:mm:ss')}}</div>
                        <!-- 清除浮动 -->
                        <div class="clearfix"></div>
                        <div class="comment-content">{{item.content}}</div>
                        <div class="line"></div>
                    </div>
                </div>
                <!-- 全部评论 -->
                <div class="all-comments">
                    <div class="comments-title">全部评论({{allcommentscount}})</div>
                    <div class="comments-body" v-for="item in allcommentslist" :key="item.commentId">
                        <el-image @click="linkToSubscribers(item.user.userId)"  class="comments-avatarimg" :src="item.user.avatarUrl" ></el-image>
                        <div class="comments-nickname">{{item.user.nickname}}</div>
                        <div class="comments-time">{{item.time | dateFormat('YYYY-MM-DD hh:mm:ss')}}</div>
                        <!-- 清除浮动 -->
                        <div class="clearfix"></div>
                        <div class="comment-content">{{item.content}}</div>
                        <div class="line"></div>
                    </div>
                </div>
                <!-- 分页 -->
                <div class="pagination">
                    <el-pagination
                    v-if="showPaginationVisable"
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :page-size="20"
                    :pageNum="1"
                    :total="allcommentscount">
                </el-pagination>
                </div>
            </div>
    </el-main>
    <!-- 留白 -->
    <el-footer class="footer"></el-footer>
  </el-container>
  <el-aside class="recommendation">
      <div class="description">
          <div v-if="mvinfo.desc" class="description-title">MV简介</div>
          <div class="description-content">{{mvinfo.desc}}</div>
      </div>
      <div class="recommend">
          <div  class="recommend-title">相关推荐</div>
          <div class="recommend-content">
              <div class="recommend-list" v-for="(item,index) in recommendlist" :key="index">
                  <div class="recommend-img" @click="linkTo(item.id)">
                      <el-image  class="recommend-coverimg" :src="item.cover" ></el-image>

                      <div class="recommend-playcount"><i class="el-icon-video-camera"></i> {{item.playCount | countFormat}}</div>
                  </div>
                  <div class="recommend-info">
                      <div @click="linkTo(item.id)" class="recommend-name">{{item.name}}</div>
                    <div class="recommend-duration">{{item.duration | dtFormat}}</div>
                    <div class="recommend-artist" v-for="(item,index) in item.artists" :key="index">by {{item.name}}</div>

                  </div>
                  <!-- 清除浮动 -->
                        <div class="clearfix"></div>

              </div>
          </div>
      </div>
  </el-aside>
</el-container>

    </div>
</template>

<script>
import Player from 'xgplayer'
export default {
  inject: ['reload'],
  data () {
    return {
      // mv详情
      mvinfo: {},
      queryMvVideoUrlInfo: {
        id: '',
        r: 1080
      },
      //   热门歌单评论
      hotcommentslist: [],
      hotcommentscount: '',
      //   请求获取全部评论 入参
      allcommentqueryinfo: {
        id: '',
        offset: '',
        limit: 20
      },
      // 全部歌单评论
      allcommentslist: [],
      //   评论总条数
      allcommentscount: '',
      //   控制分页组件的显示，让其在页面加载完后再显示
      showPaginationVisable: false,
      //   推荐mv列表
      recommendlist: []

    }
  },
  created () {

  },
  mounted () {
    //   mv详情
    this.getMvInfo()
    // 视频播放器
    this.xgplayer()
    // 热门评论
    this.getHotSongComments()
    // 全部评论
    this.getAllMvComments()
    // 推荐视频
    this.getRecommendList()
  },
  methods: {
    //   根据 id 获取mv信息
    async getMvInfo () {
      var mvid = this.$route.params.id
      const { data: res } = await this.$http.get('/mv/detail', { params: { mvid: mvid } })
      if (res.code !== 200) return this.$message.error('获取mv详情失败')
      this.mvinfo = res.data
      console.log('getMvInfo this.mvinfo:', this.mvinfo)
    },
    // 根据 id 获取 视频链接
    async getMvVideoUrl () {
      var mvid = this.$route.params.id
      this.queryMvVideoUrlInfo.id = mvid
      const { data: res } = await this.$http.get('/mv/url', { params: this.queryMvVideoUrlInfo })
      if (res.code !== 200) return this.$message.error('获取mv视频链接失败')
      var videourl = res.data.url
      //   console.log('getMvVideoUrl videourl:', videourl)
      return videourl
    },

    //   视频播放器实例
    async xgplayer () {
      // 获取视频链接
      var videourl = await this.getMvVideoUrl()
      //   console.log('xgplayer videourl:', videourl)
      const player = new Player({
        id: 'mvvideo',
        url: videourl,
        // 封面
        // poster: this.mvinfo.cover,
        // 宽度随父组件变化
        fluid: true,
        // 初始化显示首帧
        videoInit: true,

        download: true // 设置download控件显示,点了没有反应

      })
      //   设置封面
      //   player.poster = 'http://p1.music.126.net/2cXJJRroBgy2wULzQ0SQlg==/109951165923968787.jpg'
      //   player.src = this.mvurl
      console.log(player.src)
    },

    // 通过 id 获取 热门歌单评论
    async getHotSongComments () {
      var mvid = this.$route.params.id
      const { data: res } = await this.$http.get('comment/hot', { params: { id: mvid, type: 1 } })
      if (res.code !== 200) return this.$message.error('获取热门歌单评论失败')
      //   接口返回的评论数有bug，自己根据评论数计算
      this.hotcommentslist = res.hotComments
      console.log('hotcommentslist.length', this.hotcommentslist.length)
      //   this.hotcommentscount = res.total
      this.hotcommentscount = this.hotcommentslist.length
      console.log('hotcommentslist', this.hotcommentslist)
    },
    // 通过 id 获取 全部mv评论
    async getAllMvComments () {
      var songsheetid = this.$route.params.id
      this.allcommentqueryinfo.id = songsheetid
      console.log('getAllMvComments allcommentqueryinfo', this.allcommentqueryinfo)
      const { data: res } = await this.$http.get('/comment/mv', { params: this.allcommentqueryinfo })
      if (res.code !== 200) return this.$message.error('获取全部mv评论失败')
      this.allcommentslist = res.comments
      this.allcommentscount = res.total
      console.log('getAllMvComments allcommentslist', this.allcommentslist)
      // 当列表数据渲染完成后再显示分页控件
      this.$nextTick(() => {
        this.showPaginationVisable = true
      })
    },
    // 监听 页码 变化事件
    handleCurrentChange (pageNum) {
      console.log(pageNum)
      this.allcommentqueryinfo.offset = (pageNum - 1) * this.allcommentqueryinfo.limit
      this.getAllMvComments()
    },
    // 跳转到订阅者的主页
    linkToSubscribers (Id) {
      window.open('https://music.163.com/#/user/home?id=' + Id)
    },
    // 获取推荐 mv 列表
    async getRecommendList () {
      var mvid = this.$route.params.id
      const { data: res } = await this.$http.get('/simi/mv', { params: { mvid: mvid } })
      if (res.code !== 200) return this.$message.error('获取相似mv失败')
      this.recommendlist = res.mvs
    },
    linkTo (mvid) {
      console.log('跳转详情页', mvid)
      this.$router.push({ path: `/video/videodetail/${mvid}` })
      //   局部刷新页面
      this.reload()
      //   回到顶部
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
    }
  }
}
</script>

<style scoped>
.container{
    width: 80%;
    margin: 0 auto;
    background: white;
}
.mv-container{
    /* width: 60% !important; */
    border: 1px solid #d3d3d3
}
.video{
    padding-top: 20px;
    padding: 20px 3% 0 3%;
    /* border: 2px solid red; */
    height: 500px !important;
    /* 灰色 */
    /* background: #ececea; */

}
#mvvideo{
    margin: 0 auto;
    flex:auto;
}
/* 视频信息 */
.mvinfo{
    margin-top: 20px;
}
.name{
    font-size: 24px;
    color: #333333;
    font-weight: 700;
}
.otherinfo{
    display: flex;
    font-size: 14px;
    color: #6d6d6d;
    margin-top: 10px;
}
.artist{
    margin-left: 10px;
}
.datetime{
    margin-left: 10px;
}
/* 评论 */
.comments-container{
    /* border: 2px solid green; */
}
.comments{
    width: 90%;
    margin: 0px auto;
}
.hot-comments{
    margin-top: 40px;
    margin-bottom: 40px;
}
.comments-txt{
    font-weight: 700;
    font-size: 24px;
}
.comments-title{
    font-size: 14px;
    font-weight: 700;
}
.comments-body{
    margin-top: 20px;
}
/* 评论者头像 */
.comments-avatarimg{
    width: 35px;
    border-radius: 50%;
    cursor: pointer;
    float: left;
}
.comments-nickname{
    float: left;
    margin-left: 10px;
    font-size: 14px;
    color: rgba(51,51,51,.6);
    line-height: 35px;
}
.comments-time{
    float: left;
    line-height: 35px;
    margin-left: 20px;
    font-size: 14px;
    color: rgba(51,51,51,.3);
}
.comment-content{
    /* 底部留有部分距离，可以在不设置高度的情况下样式美观，设置高度会导致无法根据文字自适应显示 */
    padding-bottom: 15px;
    padding-left: 45px;
    /* min-height: 40px; */
    line-height: 22px;
    color: #333;
    font-size: 13px;
    font-weight: 400;
    /* 显示3行。超出部分显示".." */
    /* overflow: hidden;
    display: -webkit-box;
     -webkit-box-orient:vertical;
    -webkit-line-clamp: 3; */
}
/* 评论分割线 */
.line{
    border-bottom: 1px #dedeee double;
    margin-left: 45px;
}
.pagination{
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
.description{
    margin-top: 20px;

}
.description-title{
    color: #333333;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
}
/* 简介 */
.description-content{
    width: 90%;
    font-size: 13px;
    padding-left: 10px;
    letter-spacing:1px;
    line-height: 18px;
    /* margin: 0 auto; */
}
/* 推荐 */
.recommendation{
    width: 35% !important;
    border-right: 1px solid #d3d3d3;
    padding-left: 10px;
}
.recommend{
    margin-top: 20px;
}
.recommend-title{
    color: #333333;
    font-size: 16px;
    font-weight: 700;
}
.recommend-img{
    width: 40%;
    float: left;
    position: relative;
    cursor: pointer;
}
.recommend-coverimg{
    width: 100%
}
.recommend-playcount{
    color: white;
    font-size: 13px;
    position: absolute;
    top: 5px;
    right: 5px;
}
.el-icon-video-camera{
    color: white;
    font-size: 18px;
    /* 垂直向上10%，与文字对齐 */
    vertical-align: -10%
}
.recommend-list{
    /* border: 2px solid orange; */
    margin: 15px
}
.recommend-info{
    float: left;
    margin-left: 10px;
    width: 50%;
}
.recommend-name{
    color: #333333;
    font-size: 14px;
    font-weight: 700;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    cursor: pointer;
}
.recommend-duration{
    color: #999999;
    font-size: 14px;
}
.recommend-artist{
    color: #999999;
    font-size: 14px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.footer{
    /* border: 1px solid red; */
    height: 100px !important;
}
/* 清除浮动 */
.clearfix{
    clear: both;
}
</style>
